<template>
	<view class="game-container">

		<view class="layout-music flex justify-end">
			<view class="text m-right-30">背景音乐</view>
			<u-switch v-model="switchValue" size="32" @change="musicDo"></u-switch>

		</view>


		<!-- 匹配中 -->
		<view v-if="status === 'matching'" class="matching-box">
			<view class="wait">

				<image class="full" :src="url" mode=""></image>
				<view class="text">匹 配 中...</view>

				<view class="tips">
					<view style="text-align: center;width: 100%;">注:只有匹配对战才能上排行榜哦~</view>
				</view>
				<!-- 	<button @tap="cancelMatch" class="caozuo">取消匹配</button> -->

			</view>


		</view>

		<!-- 匹配成功 -->
		<view v-if="status === 'matched'" class="matched-box">
			<text>匹配成功！</text>
			<text>对手: {{ opponent.nick_name }}</text>
			<text>游戏即将开始...</text>
		</view>

		<!-- 游戏中 -->
		<view v-if="status === 'gaming'" class="gaming-box">
			<view class="layout-position">

				<!-- 双方 -->
				<view class="layout-vs flex justify-between align-center m-top-30">
					<view class="user">
						<view class="hd hd-1">
							<u-image :src="userInfo.avatar_url" width="120rpx" height="120rpx" shape="circle"></u-image>
						</view>
						<view class="number number-1 flex justify-center align-center">

							<text class="da">{{yourTotalScore}}</text>
						</view>
						<view class="name name-1 flex align-center">
							<view class="text-single">{{userInfo.nick_name}}</view>
						</view>
						<!-- 	<view v-for="(number, index) in numbers" :key="index" class="an-number"
							:class="{ animate: number.animate }" :style="{ left: number.left }">
							+{{ number.value }}
						</view> -->
						<view v-if="yourScore" class="an-number" :class="{ animate: true }">
							+{{ yourScore }}
						</view>
					</view>
					<view class="vs">
						<image class="full" src="/static/image/vs.png" mode=""></image>
					</view>
					<view class="user">
						<view class="hd hd-2">
							<u-image :src="opponent.avatar_url" width="120rpx" height="120rpx" shape="circle"></u-image>
						</view>
						<view class="number number-2 flex justify-center align-center">
							<text class="da">{{opponentTotalScore}}</text>


						</view>
						<view class="name name-2 flex align-center">
							<view class="text-single">{{opponent.nick_name}}</view>
						</view>
						<view v-if="opponentScore" class="right-number" :class="{ animate: true }">
							+{{ opponentScore }}
						</view>
					</view>
				</view>
				<!-- 进度 -->
				<view class="layout-schedule m-top-30">
					<view class="countdown">{{countdown}}</view>
					<view class="nmb">
						随机题目『 <text class="current">{{currentQuestion+1}}</text> / {{totalQuestions}} 』
					</view>
					<view class="schedule">
						<view class="active"></view>
					</view>
				</view>
				<!-- 题目 -->
				<view class="layout-topic m-top-20">
					<view class="title">
						{{question.title}}
					</view>
					<view class="result m-top-30">
						<view class="result-item" v-for="(item,index) in question.options" :key="index"
							@click="submitAnswer(item.content)">

							<view class="jieguo">

								<block v-if="statusAnswer === 'question_result'">
									<view class="icon true" v-if="yourAnswer === item.content && correct==true">
										<image class="full" src="/static/image/rtrue.png" mode=""></image>
									</view>
									<view class="icon true" v-if="yourAnswer === item.content && correct==false">
										<image class="full" src="/static/image/rfalse.png" mode=""></image>
									</view>
								</block>
							</view>


							<view class="options">
								<view v-if="statusAnswer === 'question_result'"
									:class="['text', {dui:yourAnswer === correctAnswer&&yourAnswer === item.content}, {cuo:yourAnswer != correctAnswer&&yourAnswer === item.content}]">
									{{ item.content }}
								</view>
								<view v-else>
									{{ item.content }}
								</view>
							</view>

						</view>
					</view>



				</view>
			</view>
		</view>

		<!-- 题目结果 -->
		<view v-if="statusAnswer === 'question_result'&&status=='gaming'" class="result-box">
			<text>正确答案: {{ correctAnswer }}</text>
		</view>

		<!-- 游戏结束 -->
		<view v-if="status === 'finished'" class="end-box">

			<view class="layout-vs flex justify-between align-center m-top-30">
				<view class="user">
					<view class="hd hd-1">
						<avatar-image :url="userInfo.avatar_url" :width="120" />
					</view>
					<view class="number number-1 flex justify-center align-center">

						<image class="icon m-right-10" src="/static/image/bei.png" mode=""
							v-if="winnerId==userInfo.user_id"></image>
						<text class="da">{{yourTotalScore}}</text>
					</view>
					<view class="name name-1 flex justify-center align-center">
						<view class="text-single">{{userInfo.nick_name}}</view>
					</view>
				</view>
				<view class="vs">
					<image class="full" src="/static/image/vs.png" mode=""></image>
				</view>
				<view class="user">
					<view class="hd hd-2">
						<avatar-image :url="opponent.avatar_url" :width="120" />
					</view>
					<view class="number number-2 flex justify-center align-center">
						<image class="icon m-right-10" src="/static/image/bei.png" mode=""
							v-if="winnerId==opponent.user_id"></image>
						<text class="da">{{opponentTotalScore}}</text>

					</view>
					<view class="name name-2 flex justify-center align-center">
						<view class="text-single">{{opponent.nick_name}}</view>
					</view>
				</view>
			</view>

			<!-- 结果 -->
			<view class="layout-result">
		
					<view class="imgbox">
						<image class="full" :src="resultUrl" mode=""></image>
					</view>
				

			

				<view class="btnbox">
					<button class="share-btn" open-type="share">
						分享成绩到微信
					</button>

				</view>
				<view class="btnbox flex justify-between">
					<view class="btn-half">
						<u-button :custom-style="resultBtn" shape="circle" @click="rematch">再来一局</u-button>
					</view>
					<view class="btn-half">
						<u-button :custom-style="resultBtn" shape="circle" @click="isPopup = true">查看答题详情</u-button>
					</view>
				</view>
			</view>


		</view>
		<!-- 	
		<text class="end-title">游戏结束</text>
		<text>你的总分: {{ yourTotalScore }}</text>
		<text>对手总分: {{ opponentTotalScore }}</text>
		
		<button @tap="rematch">再来一局</button> -->

		<!-- <button @tap="rematch" v-if="status=='idle'">开始游戏</button> -->

		<!-- 弹窗 -->
		<u-popup v-model="isPopup" mode="center" border-radius="14">
			<view class="popup-box">
				<view class="popup-centent bg-white">
					<view class="thead flex justify-end">
						<view class="icon"></view>
						<view class="td flex-1 td-1">题目</view>
						<view class="td td-2">答案</view>
					</view>
					<view class="tbody m-top-10">
						<view class="tr flex align-center" v-for="(item,index) in questionList">
							<view class="icon" v-if="item.correct==true">
								<image class="full" src="/static/image/rtrue.png" mode=""></image>
							</view>
							<view class="icon" v-else>
								<image class="full" src="/static/image/rfalse.png" mode=""></image>
							</view>
							<view class="td td-1 flex-1 text-single">
								{{item.title}}
							</view>
							<view class="td td-2 text-single">{{item.answer}}</view>
						</view>

					</view>
				</view>
				<view class="btnbox">
					<view class="result-btn" @click="isPopup = false">返回</view>
				</view>
			</view>
		</u-popup>
		<!-- 右下角背景图 -->
		<view class="hi">
			<image class="full" src="/static/image/hi.png" mode=""></image>
		</view>

	</view>
</template>

<script>
	import {
		initSocket,
		sendSocketMessage,
		closeSocket
	} from '@/utils/socket';
	import storage from '@/utils/storage'
	import * as UserApi from '@/api/user'
	import * as GameApi from '@/api/game'
	export default {
		data() {
			return {
				winnerId: null,
				resultUrl: '',
				suc_num: 0,
				isPopup: false,
				numbers: [], // 存储数字对象
				status: 'idle', // idle, matching, matched, gaming, question_result, finished
				waitTime: 0,
				opponent: {
					user_id: '',
					username: '',
					elo: 0
				},
				userInfo: {
					nick_name: '',
					avatar_url: '',
					user_id: 0
				},
				matchId: '',
				currentQuestion: 0,
				totalQuestions: 0,
				question: {
					question_id: '',
					content: '',
					options: []
				},
				url: 'https://xiaolanghua.zhanyuankj.cn/static/wait.gif',
				questionList: [],
				countdown: 0,
				timer: null,
				timeout: 0,
				yourAnswer: '',
				opponentAnswer: '',
				correctAnswer: '',
				yourScore: 0,
				opponentScore: 0,
				yourTotalScore: 0,
				opponentTotalScore: 0,
				eloChange: 0,
				gameResult: '',
				switchValue: true,
				is_play: true,
				audio: null,
				audio_url: '',
				correct: null,
				statusAnswer: ''
			};
		},
		computed: {
			statusText() {
				const statusMap = {
					idle: '等待匹配',
					matching: '匹配中',
					matched: '匹配成功',
					gaming: '游戏中',
					question_result: '题目结果',
					finished: '游戏结束'
				};
				return statusMap[this.status] || '';
			}
		},
		onLoad() {
			const userId = storage.get('userId')

			const token = '1234';
			// GameApi.getPoster('room_68b00302d50ff')
			// 	.then(result => {
			// 		this.resultUrl = result.data.posterUrl

			// 		this.status = 'finished';


			// 	})

			this.userInfo.avatar_url = uni.getStorageSync('avatar');
			this.userInfo.nick_name = uni.getStorageSync('nick_name');
			this.userInfo.user_id = userId;
			this.getUserInfo()


			if (userId) {
				initSocket(userId, token);
				this.status = 'matching';
				this.startWaitTimer();

				setTimeout(() => {
					this.startMatch()
				}, 500);

			}

			// 监听事件
			uni.$on('match_success', this.handleMatchSuccess);
			uni.$on('game_start', this.handleGameStart);
			uni.$on('new_question', this.handleNewQuestion);
			uni.$on('question_timeout', this.handleQuestionTimeout);
			uni.$on('question_result', this.handleQuestionResult);
			uni.$on('opponent_answered', this.handleOpponentAnswered);
			uni.$on('game_end', this.handleGameEnd);
		},
		onUnload() {
			closeSocket();
			if (this.audio) {
				this.audio.stop();
			}
			this.clearTimers();
			uni.$off('match_success', this.handleMatchSuccess);
			uni.$off('game_start', this.handleGameStart);
			uni.$off('new_question', this.handleNewQuestion);
			uni.$off('question_timeout', this.handleQuestionTimeout);
			uni.$on('question_result', this.handleQuestionResult);
			uni.$on('opponent_answered', this.handleOpponentAnswered);
			uni.$off('game_end', this.handleGameEnd);
		},
		methods: {
			getUserInfo() {
				UserApi.info()
					.then(result => {
						this.userInfo = result.data.userInfo
						this.audio_url = result.data.userInfo.audio_url

						if (result.data.userInfo.is_music) {
							this.skvido(result.data.userInfo.audio_url)
							this.switchValue = true

						} else {
							this.switchValue = false
						}
						this.isLoading = false


					})
			},
			skvido(audio_url) {

				console.log(556)
				// 创建音频对象
				this.audio = uni.createInnerAudioContext();



				// 设置音频源
				//this.audio.src = 'https://safe.gxgyl.com/uploads/bg.mp3';
				this.audio.src = audio_url;



				// 播放音频
				this.audio.play();
				this.is_play = true

				// 监听音频播放完成事件
				this.audio.onEnded(() => {
					//this.is_play = false
					this.skvido(audio_url)
					console.log('音频播放完成');
				});

				// 监听音频播放错误事件
				this.audio.onError((err) => {
					console.log('音频播放错误', err);
				});
				return
				let _this = this;
				plugin.textToSpeech({
					lang: "zh_CN",
					tts: true,
					content: _this.timu_title,
					success: function(res) {
						console.log("succ tts", res.filename)

						let music = null;
						music = uni.createInnerAudioContext(); //创建播放器对象
						music.src = res.filename;
						music.play(); //执行播放
						music.onEnded(() => {

							//播放结束
							//_this.is_play = false
							//music = null;
						});
					},
					fail: function(res) {
						// console.log("fail tts", res)
					}
				})
			},

			musicDo(e) {
				console.log(e)
				if (e == false) {
					this.audio.stop();
				} else {
					if (!this.audio) {
						var audio_url = this.audio_url
						this.skvido(audio_url)
					} else {
						this.audio.play();
					}

				}
			},

			addNumber() {
				// 随机生成一个位置偏移，让数字不在同一个位置出现
				const randomOffset = (Math.random() * 80) - 40; // -40px 到 40px
				// 添加一个新的数字对象
				this.numbers.push({
					value: 10, // 显示的数字值
					animate: true, // 控制动画的类名
					//  left: `calc(50% + ${randomOffset}px)` // 水平位置
				});

				// 2秒后移除这个数字（动画结束后）
				setTimeout(() => {
					this.numbers.shift();
				}, 2000);
			},

			// 开始匹配
			startMatch() {

				console.log(668)
				sendSocketMessage({
					type: 'join_queue'
				});


			},

			// 取消匹配
			cancelMatch() {
				this.status = 'idle';
				this.stopWaitTimer();
				// 实际应发送离开队列消息
			},

			// 提交答案
			submitAnswer(answer) {
				//this.clearTimers();
				if (this.yourAnswer != '') {
					return
				}
				this.yourAnswer = answer;

				const timeUsed = this.question.time_limit - this.countdown;
				sendSocketMessage({
					type: 'submit_answer',
					room_id: this.matchId,
					answer: answer,

				});
			},

			// 再来一局
			rematch() {
				this.resetGame();
				this.startMatch();
			},

			// 重置游戏状态
			resetGame() {
				this.status = 'matching';
				this.waitTime = 0;
				this.opponent = {
					user_id: '',
					username: '',
					elo: 0
				};
				this.matchId = '';
				this.currentQuestion = 0;
				this.totalQuestions = 0;
				this.question = {
					question_id: '',
					content: '',
					options: []
				};
				this.countdown = 0;
				this.yourAnswer = '';
				this.opponentAnswer = '';
				this.correctAnswer = '';
				this.yourScore = 0;
				this.opponentScore = 0;
				this.yourTotalScore = 0;
				this.opponentTotalScore = 0;
				this.eloChange = 0;
				this.gameResult = '';
				this.correct=null
				this.clearTimers();
			},

			// 开始等待计时
			startWaitTimer() {
				this.waitTime = 0;
				this.waitTimer = setInterval(() => {
					this.waitTime++;
				}, 1000);
			},

			// 停止等待计时
			stopWaitTimer() {
				if (this.waitTimer) {
					clearInterval(this.waitTimer);
					this.waitTimer = null;
				}
			},

			// 开始答题倒计时
			startCountdown() {

				this.yourScore = 0
				this.opponentScore = 0
				// 清除现有定时器
				if (this.timer) {
					clearInterval(this.timer);
				}
				this.countdown = this.timeout;
				this.timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						// 停止计时器
						clearInterval(this.timer);
						//this.timer = null;
						//this.submitAnswer(''); // 超时自动提交,后端处理，不需要在这
					}
				}, 1000);
			},

			// 清除所有计时器
			clearTimers() {
				if (this.waitTimer) {
					clearInterval(this.waitTimer);
					this.waitTimer = null;
				}
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},

			// ---------------------- 事件处理 ----------------------
			handleMatchSuccess(data) {
				//this.status = 'matched';
				this.status = 'gaming';
				this.matchId = data.matchId;
				this.opponent = data.opponent;
				this.totalQuestions = data.totalQuestions;

				this.stopWaitTimer();
			},


			handleGameStart(data) {
				this.status = 'gaming';
				this.matchId = data.matchId;
				this.totalQuestions = data.totalQuestions;
			},

			handleNewQuestion(data) {
				if (data.matchId !== this.matchId) return;
				this.status = 'gaming';
				this.statusAnswer = ''
				this.currentQuestion = data.current;
				this.totalQuestions = data.totalQuestions;
				this.question = data.question;
				this.yourAnswer = '';
				this.timeout = data.timeLimit
				this.startCountdown();
			},
			//对手结果
			handleOpponentAnswered(data) {
				if (data.matchId !== this.matchId) return;

				this.status = 'gaming';
				this.opponentScore = data.opponentScore;
				// 更新总分
				this.opponentTotalScore += data.opponentScore;


				// 3秒后自动下一题
				// setTimeout(() => {
				// 	this.status = 'gaming';
				// }, 3000);
			},
			handleQuestionResult(data) {
				if (data.matchId !== this.matchId) return;

				this.status = 'gaming';
				this.statusAnswer = 'question_result'
				this.yourAnswer = data.yourAnswer;
				this.correctAnswer = data.correctAnswer;
				this.yourScore = data.yourScore;
				// 更新总分
				this.yourTotalScore += data.yourScore;
				this.correct = data.correct
				if (data.correct == false) {
					uni.showToast({
						title: '回答错误',
						icon: 'none'
					})
				}



				// 3秒后自动下一题
				// setTimeout(() => {
				// 	this.status = 'gaming';
				// }, 3000);
			},

			handleGameEnd(data) {
				if (data.matchId !== this.matchId) return;

				GameApi.getPoster(data.matchId)
					.then(result => {
						this.resultUrl = result.data.posterUrl

						this.status = 'finished';
						this.questionList = data.answers;
						this.yourScore = data.total_score
						this.suc_num = data.suc_num;
						this.winnerId = data.winnerId

					})






			}
		}
	};
</script>

<style lang="scss">
	.result-box {
		padding-left: 50rpx;
		position: absolute;
		z-index: 999;
	}

	.caozuo {
		position: absolute;
		bottom: 100rpx;
	}

	.wait {
		position: fixed;
		//top: 50%;
		z-index: 99;
		//margin-top: -475rpx;
		width: 750rpx;
		height: 750rpx;

		.text {
			position: absolute;
			left: 50%;
			top: 50%;
			z-index: 9;
			transform: translate(-50%, -50%);
			font-size: 48rpx;
			color: #000;
		}

		.tips {
			position: absolute;
			width: 100%;
			left: 50%;
			bottom: -50rpx;
			font-weight: bold;
			z-index: 9;
			transform: translate(-50%, -50%);
			font-size: 28rpx;
			color: #ff0000;
		}
	}

	.share-btn {
		background-color: #0197F8;
		color: #FFF;
		border-radius: 50rpx;

	}

	.hi {
		position: fixed;
		right: 0;
		bottom: 30rpx;
		z-index: 1;
		width: 500rpx;
		height: 372rpx;
	}

	.hi image {
		width: 100%;
		height: 100%;
	}

	.layout-position {
		position: relative;
		z-index: 99;
	}

	.layout-music {
		padding: 20rpx 36rpx;

		.text {
			font-size: 36rpx;
			line-height: 38rpx;
			color: #101010;
		}
	}

	.layout-vs {
		position: relative;
		height: 250rpx;

		.vs {
			position: absolute;
			left: 50%;
			bottom: 0;
			z-index: 1;
			transform: translateX(-50%);
			width: 120rpx;
			height: 100rpx;
		}
	}

	.user {
		position: relative;
		width: 300rpx;
		height: 172rpx;
		padding-top: 10rpx;

		.hd {
			position: absolute;
			top: 0;
			z-index: 10;
			width: 120rpx;
			height: 120rpx;
		}
	}

	.name {
		// position: absolute;
		// bottom: 0;
		// z-index: 9;
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		line-height: 40rpx;
		color: #fff;
	}

	.hd-1 {
		right: -20rpx;
	}

	.hd-2 {
		left: -20rpx;
	}

	.name-1 {
		// left: 0;
		padding: 0 40rpx 0 36rpx;
		background: url('~@/static/image/name-1.png') center no-repeat;
		background-size: 100% 100%;
	}

	.name-2 {
		// right: 0;
		padding: 0 36rpx 0 40rpx;
		background: url('~@/static/image/name-2.png') center no-repeat;
		background-size: 100% 100%;
	}

	.number {
		width: 100%;
		height: 72rpx;
		box-sizing: border-box;

		.icon {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.number-1 {
		padding-right: 100rpx;
	}

	.number-2 {
		padding-left: 100rpx;
	}

	.sm {
		margin-top: -6rpx;
		font-size: 32rpx;
		font-weight: 600;
		line-height: 1;
		color: #FC2A2A;
	}

	.da {
		font-size: 40rpx;
		font-weight: 600;
		line-height: 1;
		color: #FC2A2A;
	}

	.layout-result {
		position: absolute;
		top: 330rpx;
		z-index: 999;
		margin: 0 auto;
		width: 100%;
		padding: 36rpx 20rpx;

		.imgbox {
			height: 500rpx;
		}

		.num {
			position: absolute;
			top: 455rpx;
			right: 215rpx;
			font-size: 18rpx;
			color: #ffaa00;
		}

		.name {
			position: absolute;
			top: 336rpx;
			left: 245rpx;
			font-size: 36rpx;
			color: #ffaa00;
		}
	}

	.btnbox {
		width: 580rpx;
		margin: 40rpx auto 0;
	}

	.result-btn {
		height: 80rpx;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 80rpx;
		color: #fff;
		text-align: center;
		background: #0197F8;
		border: none;
		border-radius: 40rpx;
	}

	.btn-half {
		width: 260rpx;
	}

	.popup-box {
		width: 710rpx;
		height: auto;
		padding: 36rpx 0 50rpx;
		background: transparent;

		.popup-centent {
			padding: 20rpx 20rpx;
			min-height: 300rpx;
			border-radius: 10rpx;
		}

		.icon {
			width: 35rpx;
			height: 35rpx;
		}

		.td-1 {
			padding: 0 36rpx;
		}

		.td-2 {
			width: 180rpx;
			text-align: center;
		}

		.thead {
			font-size: 36rpx;
			font-weight: 600;
			line-height: 48rpx;
			color: #ADADAD;
			text-align: center;
		}

		.tbody {
			font-size: 32rpx;
			line-height: 40rpx;
			color: #101010;
		}
	}

	.tr {
		padding: 8rpx 0;
	}
</style>
<style>
	.right-number {
		position: absolute;
		top: 60rpx;
		right: 100rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #FC2A2A;
		opacity: 0;
		transform: translateY(0);
		text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}

	.right-number.animate {
		animation: riseUp 2s ease-out forwards;
	}

	.an-number {
		position: absolute;
		top: 60rpx;
		left: 100rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #FC2A2A;
		opacity: 0;
		transform: translateY(0);
		text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}

	.an-number.animate {
		animation: riseUp 2s ease-out forwards;
	}

	@keyframes riseUp {
		0% {
			opacity: 1;
			transform: translateY(0) scale(1);
		}

		20% {
			opacity: 1;
			transform: translateY(-40px) scale(1.2);
		}

		80% {
			opacity: 0.7;
			transform: translateY(-120px) scale(1);
		}

		100% {
			opacity: 0;
			transform: translateY(-160px) scale(0.8);
		}
	}
</style>
<style lang="scss">
	.layout-position {
		position: relative;
		z-index: 99;
	}

	.layout-music {
		padding: 20rpx 36rpx;

		.text {
			font-size: 34rpx;
			line-height: 38rpx;
			color: #101010;
		}
	}

	.layout-vs {
		position: relative;

		.vs {
			position: absolute;
			left: 50%;
			bottom: 0;
			z-index: 1;
			transform: translateX(-50%);
			width: 120rpx;
			height: 100rpx;
		}
	}

	.user {
		position: relative;
		width: 300rpx;
		height: 172rpx;
		padding-top: 10rpx;

		.hd {
			position: absolute;
			top: 0;
			z-index: 10;
			width: 120rpx;
			height: 120rpx;
		}
	}

	.name {
		// position: absolute;
		// bottom: 0;
		// z-index: 9;
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		line-height: 40rpx;
		color: #fff;
	}

	.hd-1 {
		right: -20rpx;
	}

	.hd-2 {
		left: -20rpx;
	}

	.name-1 {
		// left: 0;
		padding: 0 40rpx 0 36rpx;
		background: url('~@/static/image/name-1.png') center no-repeat;
		background-size: 100% 100%;
	}

	.name-2 {
		// right: 0;
		padding: 0 36rpx 0 40rpx;
		background: url('~@/static/image/name-2.png') center no-repeat;
		background-size: 100% 100%;
	}

	.number {
		width: 100%;
		height: 72rpx;
		box-sizing: border-box;
	}

	.number-1 {
		padding-right: 100rpx;
	}

	.number-2 {
		padding-left: 100rpx;
	}

	.sm {
		margin-top: -6rpx;
		font-size: 32rpx;
		font-weight: 600;
		line-height: 1;
		color: #FC2A2A;
	}

	.da {
		font-size: 40rpx;
		font-weight: 600;
		line-height: 1;
		color: #FC2A2A;
	}

	.layout-topic {
		padding: 20rpx 0rpx;

		.title {
			font-size: 36rpx;
			line-height: 48rpx;
			color: #101010;
		}

		.result-item {
			position: relative;
			display: flex;
			align-items: center;

			margin: 10rpx auto 0;

			min-height: 100rpx;

			font-size: 36rpx;
			line-height: 44rpx;
			color: #ffffff;
			box-sizing: border-box;

			.jieguo {
				width: 50rpx;
			}


			.options {
				background-color: #0197f8;
				border-radius: 10rpx;
				width: 650rpx;
				padding: 30rpx 10rpx;
				display: flex;

				align-items: center;
			}

			.icon {
				display: flex;
				justify-content: center;
				align-items: center;


			}

			.icon image {
				width: 40rpx;
				height: 40rpx;
			}

			.true {
				left: 10rpx;
			}

			.false {
				right: 10rpx;
			}

			.dui {
				color: #6BFF47;
			}

			.cuo {
				color: #FC2A2A;
			}
		}
	}

	.layout-schedule {
		position: relative;
		padding: 0rpx 36rpx;

		.countdown {
			position: relative;
			z-index: 10;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 122rpx;
			height: 122rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: #FC2A2A;
			border-radius: 50%;
			border: 11rpx solid #aae0e0;
			box-sizing: border-box;
			background-image: linear-gradient(#5a8cd1, #5084cd);
		}

		.nmb {
			position: absolute;
			left: 160rpx;
			top: 0;
			z-index: 8;
			font-size: 36rpx;
			line-height: 52rpx;
			color: #fff;

			.current {
				color: #FC2A2A;
			}
		}

		.schedule {
			position: absolute;
			left: 90rpx;
			bottom: 0;
			z-index: 8;
			width: 636rpx;
			height: 68rpx;
			border: 10rpx solid #79c0c6;
			border-radius: 34rpx;
			box-sizing: border-box;
			background-image: linear-gradient(#31757e, #4fc2b3, #2e7885);

			.active {
				width: 30%;
				height: 48rpx;
				border-radius: 28rpx;
				background-image: linear-gradient(#6cbaf8, #6ea8f1, #2858ad);
			}
		}
	}
</style>